<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <font-awesome-icon icon="fa-solid fa-angle-left" onclick="history.go(-1)" />
            <p>健康档案</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section>
            <img src="@/assets/img/report.png">
            <ul>
                <li v-for="(report,index) in reportList" :key="index" @click="toReport(report.orderId)">
                    <div class="left">
                        <font-awesome-icon icon="fa-regular fa-paste" style="font-size: 30px; color: #808080; position:relative;right:10px;"/>
                        <div>
                            <p>{{report.orderDate}} 体检报告</p>
                            <p>{{report.hpName}}</p>
                        </div>
                    </div>
                    <div class="right">
                        <font-awesome-icon icon="fa-solid fa-chevron-right" />
                    </div>
                </li>
            </ul>
        </section>
        
        <div class="bottom-ban"></div>
        
    </div>
</template>
<script setup>
import Footer from '@/components/Footer.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import axios from "../plugin/axiosInstance";
import { reactive, ref } from 'vue';

const  reportList=reactive([]);

const toReport=(orderId)=>{
    router.push({path:'/report', query:{ orderId : orderId}});
}

const getReportList=()=>{
    axios.get('/report/getAllReport').then(res=>{
        if(res.data.code==200){
            const data = res.data.data;
            reportList.splice(0,reportList.length);
            data.forEach(report=>reportList.push(report));
        }
    })
}

const init=()=>{
    getReportList();
}

init();
</script>

<style scoped>
@import "../assets/css/reportlist.css";
</style>